<template>
  <div class="enabled page-home" style="flex:1;" >
    <div class="main-page">
      <div class="content-wrapper">
        <div class="mt20">
          <ksd-banner-channel :type="8" ref="bannerRef" :height="350"></ksd-banner-channel>
        </div>
        <ksd-note-page></ksd-note-page>
        <div class="gui-padding" style="background:#fff;" v-if="categoryListData && categoryListData.length > 0">
          <div class="wrapper-head fw ">
            全部课程
          </div>
          <!--一级分类-->
          <div class="item-content">
            <div class="item-content-margin-t-16 item-content-top item-content-top-content">
              <i class="iconfont icon-category mr3 pt tp2">
              </i>
              <span class="item-content-title">
              分类
            </span>
            </div>
            <ul class="cate-group" style="display: flex;">
              <nuxt-link class="all cate-item" @click.prevent="handleLoadNote(0,-1)" :class="[currentIndex==-1?'active':'']">
                全部
              </nuxt-link>
              <nuxt-link class="cate-item" href="javascript:void(0);"
                         :class="[currentIndex==nindex?'active':'']"
                         @click.prevent="handleLoadNote(item.id,nindex)"
                         :key="nindex" v-for="(item,index) in categoryListData">
                {{item.title}}
              </nuxt-link>
            </ul>
          </div>
          <!--二级分类-->
          <div class="item-content" v-if="childrenListData && childrenListData.length > 0">
            <div class="item-content-margin-t-16 item-content-top item-content-top-content">
              <i class="iconfont icon-category mr3 pt tp2">
              </i>
              <span class="item-content-title">
              分类
            </span>
            </div>
            <ul class="cate-group" style="display: flex;">
              <nuxt-link class="all cate-item" @click.prevent="handleLoadCNote(0,-1)" :class="[currentIndex3==-1?'active':'']">
                全部
              </nuxt-link>
              <nuxt-link class="cate-item" href="javascript:void(0);"
                         :class="[currentIndex3==nindex?'active':'']"
                         @click.prevent="handleLoadCNote(item.id,nindex)"
                         :key="nindex" v-for="(item,index) in childrenListData">
                {{item.title}}
              </nuxt-link>
            </ul>
          </div>

          <div class="filter-bar" style="display: block;">
            <!--价格搜索-->
            <div class="item-content">
              <div class="item-content-margin-t-16 item-content-top item-content-top-content">
                <i class="iconfont icon-lock mr3 pt tp2">
                </i>
                <span class="item-content-title">
                  权限
                </span>
              </div>
              <ul class="filter-price-bar pr ftp5">
                <nuxt-link class="filter-bar-item" href="javascript:void(0);"
                           :class="[currentIndex2==-1?'active':'']"
                           @click.prevent="handleLoadNoteVipFlag(-1,-1)">
                  全部
                </nuxt-link>
                <nuxt-link class="filter-bar-item" href="javascript:void(0);"
                           :class="[currentIndex2==2?'active':'']"
                           @click.prevent="handleLoadNoteVipFlag(1,2)">
                  免费
                </nuxt-link>
                <nuxt-link class="filter-bar-item" href="javascript:void(0);"
                           :class="[currentIndex2==0?'active':'']"
                           @click.prevent="handleLoadNoteVipFlag(2,0)">
                  VIP专属
                </nuxt-link>
                <nuxt-link class="filter-bar-item" href="javascript:void(0);"
                           :class="[currentIndex2==1?'active':'']"
                           @click.prevent="handleLoadNoteVipFlag(3,1)">
                  SVIP专属
                </nuxt-link>
              </ul>
            </div>
            <!--类型搜索-->
            <div class="item-content item-content-bottom-line pr ftp5 flex justify-content-between align-center">
              <div class="flex">
                <div class="item-content-margin-t-16 item-content-top item-content-top-content">
                  <i class="iconfont icon-a-dagang1 mr3 pt tp2">
                  </i>
                  <span class="item-content-title">
                  类型
                </span>
                </div>
                <ul class="filter-price-bar pr ftp5">
                  <nuxt-link class="filter-bar-item" href="javascript:void(0);"
                             :class="[currentIndex4==-1?'active':'']"
                             @click.prevent="handleLoadNoteType(-1,-1)">
                    全部
                  </nuxt-link>
                  <nuxt-link class="filter-bar-item" href="javascript:void(0);"
                             :class="[currentIndex4==0?'active':'']"
                             @click.prevent="handleLoadNoteType(1,0)">
                    基础
                  </nuxt-link>
                  <nuxt-link class="filter-bar-item" href="javascript:void(0);"
                             :class="[currentIndex4==1?'active':'']"
                             @click.prevent="handleLoadNoteType(2,1)">
                    进阶
                  </nuxt-link>
                  <nuxt-link class="filter-bar-item" href="javascript:void(0);"
                             :class="[currentIndex4==2?'active':'']"
                             @click.prevent="handleLoadNoteType(3,2)">
                    实战
                  </nuxt-link>
                  <nuxt-link class="filter-bar-item" href="javascript:void(0);"
                             :class="[currentIndex4==3?'active':'']"
                             @click.prevent="handleLoadNoteType(4,3)">
                    面试
                  </nuxt-link>
                </ul>
              </div>
              <div class="search-box">
                <input type="text" placeholder="请输入搜索词" class="search-input" id="keyword" v-model.trim="queryParams.keyword">
                <button class="btn search-button" @click.prevent="handleSearch"><i class="iconfont icon-search mr3"></i>搜索</button>
              </div>
            </div>
            <!--最新，最热，推荐，最近更新-->
            <div class="filter-sort-bar flex justify-content-between mt5">
              <div>
                <nuxt-link class="filter-bar-item" href="javascript:void(0);"
                           :class="[currentIndex5==-1?'active':'']"
                           @click.prevent="handleLoadOther(-1,-1)">
                  全部
                </nuxt-link>
                <nuxt-link class="filter-bar-item" href="javascript:void(0);"
                           :class="[currentIndex5==0?'sort-active':'']"
                           @click.prevent="handleLoadOther(0,0)">
                  新课
                </nuxt-link>
                <nuxt-link class="filter-bar-item" href="javascript:void(0);"
                           :class="[currentIndex5==1?'sort-active':'']"
                           @click.prevent="handleLoadOther(1,1)">
                  热课
                </nuxt-link>
                <nuxt-link class="filter-bar-item" href="javascript:void(0);"
                           :class="[currentIndex5==2?'sort-active':'']"
                           @click.prevent="handleLoadOther(2,2)">
                  推荐
                </nuxt-link>
              </div>
              <div>
                <nuxt-link class="filter-bar-item" href="javascript:void(0);"
                           :class="[currentIndex6==0?'sort-active':'']"
                           @click.prevent="handleLoadOrder(0,0)">
                  最新
                </nuxt-link>
                <nuxt-link class="filter-bar-item" href="javascript:void(0);"
                           :class="[currentIndex6==1?'sort-active':'']"
                           @click.prevent="handleLoadOrder(1,1)">
                  浏览数最多
                </nuxt-link>
                <nuxt-link class="filter-bar-item" href="javascript:void(0);"
                           :class="[currentIndex6==2?'sort-active':'']"
                           @click.prevent="handleLoadOrder(2,2)">
                  最近更新
                </nuxt-link>
              </div>
            </div>
          </div>

        <div class="filter-temp" style="width: 100%;">
          <div class="temp-list" style="display: block;">
            <ul class="temp-tag-list masonry" v-if="noteListData && noteListData.length > 0">
              <li class="temp-list-item masonry-brick" :key="nindex" style="opacity: 1;"
                  v-for="(item,index) in noteListData">
                <div class="list-item-content">
                  <div class="item-module">
                    <div class="item-module-img">
                      <nuxt-link class="item-title-a" :to="'/note/detail/'+item.id"
                                 :title="item.title"
                                 :alt="item.title"><img v-lazy="item.img" />
                        <div class="item-shade">
                          <div class="collet-btn" v-if="item.pushFlag==1">推荐</div>
                          <div class="collet-btn" v-if="item.newFlag==1">新课</div>
                          <div class="collet-btn" v-if="item.hotFlag==1">热课</div>
                          <span class="classify" v-if="item.vipFlag==2">
                              vip免费
                          </span>
                          <span class="classify" v-if="item.vipFlag==3">
                              SVIP免费
                          </span>
                        </div>
                        <div class="type-label-box">
                          <div class="type-label">
                           {{item.categoryName}}
                          </div>
                        </div>
                      </nuxt-link>
                    </div>
                  </div>
                  <div class="temp-item-detail" style="border-width:0">
                    <div class="title-box one-line-hidden fb mt10 c3333">
                      <nuxt-link class="" :to="'/note/detail/'+item.id" :title="item.title" :alt="item.title">
                        {{item.title}}
                      </nuxt-link>
                    </div>
                    <div class="description-box ET5 EC14 one-line-hidden mb5 c9999">
                      {{item.description || "暂无"}}
                    </div>
                    <div class="social-btn-group">
                      <nuxt-link :to="'/note/detail/'+item.id"  class="flex align-center" :title="item.title" :alt="item.title">
                        <span class="classify" v-if="item.notetype==1">
                            基础课
                        </span>
                        <span class="classify" v-if="item.notetype==2">
                            进阶课
                        </span>
                        <span class="classify" v-if="item.notetype==3">
                            实战课程
                        </span>
                        <span class="classify" v-if="item.notetype==4">
                            面试课
                        </span>
                        <span class="pr tp3 fz14 fb">
                          <span class="praise social-btn ml3">
                            <span class="iconfont icon-eye">
                            </span>
                            <span class="count">
                              {{item.viewcount||0}}
                            </span>
                          </span>
                         <span class="like social-btn ml5">
                                <span class="iconfont icon-shoucang">
                                </span>
                                <span class="count">
                                  {{item.favNum||0}}
                                </span>
                              </span>
                        </span>
                      </nuxt-link>
                    </div>
                    <div class="temp-item-owner flex justify-between mt-1 align-items">
                      <nuxt-link  class="flex align-items"  to="javascript:void(0);">
                        <img v-lazy="item.avatar" :alt="item.nickname">
                            <span class="owner-name pr tp1">
                          {{item.nickname}}
                        </span>
                      </nuxt-link>
                      <div class="item-market pc-new-price-item newStyle" v-if="item.payFlag==2">
                        <div class="marketing-info-prices_org">
                          {{item.realprice}}
                        </div>
                        <div class="marketing-info-prices_dis">
                          {{item.price}}
                        </div>
                      </div>
                      <div class="item-market pc-new-price-item newStyle pr ftp2" v-else>
                        <div class="green fz14">免费</div>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
            <k-loading :show="loadingFlag"></k-loading>
            <div class="py-[60px]" v-if="total==0" style="background: #f0f0f0">
              <k-empty :show="total==0">
              </k-empty>
            </div>
            <div class="mt-2 flex justify-center mb20" v-if="total > queryParams.pageSize">
              <n-pagination v-model:page="queryParams.pageNo" v-model:page-size="queryParams.pageSize"
                            :display-order="['pages', 'quick-jumper', 'size-picker']" show-quick-jumper
                            :item-count="total" :page-sizes="pageSizesList" :on-update:page="handleLoadPage"
                            :on-update:page-size="handleLoadPageSize" />
            </div>
          </div>
        </div>
      </div>
      </div>
    </div>
  </div>
</template>
<script setup>
useHead({title: "课程"})
const categoryListData = ref([])
const childrenListData = ref([])
// 定义激活分类选择
const currentIndex = ref(-2)
const currentIndex2 = ref(-1)
const currentIndex3 = ref(-1)
const currentIndex4 = ref(-1)
const currentIndex5 = ref(-1)
const currentIndex6 = ref(0)
// 定义课程容器
const noteListData = ref([])
// 控制加载课程的动画效果
const loadingFlag = ref(false)
// 统计分页的总数
const total = ref(-1)
// 统计分页的总页数
const pages = ref(0)
// 分页显示的列表
const pageSizesList = ref([
  {
    label: '15 每页',
    value: 15
  },
  {
    label: '30 每页',
    value: 30
  },
  {
    label: '40 每页',
    value: 45
  }
])
// 查询课程的参数
const queryParams = ref({
  pageNo: 1,
  pageSize: 20,
  categoryPid: 0,
  categoryCid: 0,
  hotFlag:0,
  newFlag:0,
  pushFlag:0,
  payFlag: 0,
  vipFlag: 0,
  orderNum: 0,
  keyword: ""
})

// 根据一级分类id查询课程信息
const handleLoadNote = async (pid, index) => {
  if(currentIndex.value == nindex)return;
  currentIndex.value = nindex

  currentIndex3.value = -1
  queryParams.value.categoryCid = 0
  // 改变分类的时候，一定要下一个分类的从第一页开始去查询
  queryParams.value.pageNo = 1
  queryParams.value.categoryPid = pid
  childrenListData.value = categoryListData.value[nindex]?.children
  handleLoadNoteMain()
}


const handleSearch = debounce(()=>{
  if(!queryParams.value.keyword){
    useMessage().error("请输入搜索关键词!")
    handleLoadNoteMain()
    return;
  }
  getDom("keyword").focus()
  queryParams.value.pageNo = 1
  handleLoadNoteMain()
},300)

// 根据二级分类id查询课程信息
const handleLoadCNote = async (cid, index) => {
  if(currentIndex3.value == nindex)return;
  currentIndex3.value = nindex
  // 改变分类的时候，一定要下一个分类的从第一页开始去查询
  queryParams.value.pageNo = 1
  queryParams.value.categoryCid = cid
  handleLoadNoteMain()
}

// 根据分类id查询课程信息
const handleLoadNoteType = async (noteType, index) => {
  if(currentIndex4.value == nindex)return;
  currentIndex4.value = nindex
  // 改变分类的时候，一定要下一个分类的从第一页开始去查询
  queryParams.value.pageNo = 1
  queryParams.value.notetype = noteType
  handleLoadNoteMain()
}

// 根据分类id查询课程信息
const handleLoadOther = async (noteType, index) => {
  if(currentIndex5.value == nindex)return;
  currentIndex5.value = nindex
  // 改变分类的时候，一定要下一个分类的从第一页开始去查询
  queryParams.value.pageNo = 1

  if(noteType==-1){
    queryParams.value.newFlag = 0
    queryParams.value.hotFlag = 0
    queryParams.value.pushFlag = 0
  }

  if(noteType==0) {
    queryParams.value.newFlag = 1
  }
  if(noteType==1) {
    queryParams.value.hotFlag = 1
  }
  if(noteType==2) {
    queryParams.value.pushFlag = 1
  }
  handleLoadNoteMain()
}


const handleLoadOrder = async (noteType, index) => {
  if(currentIndex6.value == nindex)return;
  currentIndex6.value = nindex
  // 改变分类的时候，一定要下一个分类的从第一页开始去查询
  queryParams.value.pageNo = 1
  queryParams.value.orderNum = noteType
  handleLoadNoteMain()
}

// 根据分类id查询课程信息
const handleLoadNoteVipFlag = async (vipFlag, index) => {
  if(currentIndex2.value == nindex)return;
  currentIndex2.value = nindex
  // 改变分类的时候，一定要下一个分类的从第一页开始去查询
  if(vipFlag==1){
    queryParams.value.payFlag = 1
    queryParams.value.vipFlag = 0
    queryParams.value.pageNo = 1
  }else {
    queryParams.value.payFlag = 0
    queryParams.value.pageNo = 1
    queryParams.value.vipFlag = vipFlag
  }
  handleLoadNoteMain()
}

// 根据cid课程查询课程的主方法
const handleLoadNoteMain = async () => {
  loadingFlag.value = true
  queryParams.value.pageSize = 30
  const res = await useLoadNoteApi(queryParams.value)
  noteListData.value = res.data.records
  total.value = res.data.total
  pages.value = res.data.pages
  loadingFlag.value = false
}


// 加载课程分类列表信息
const handleLoadNoteCategories = async () => {
  const cacheData = useCache("NATEGORYLIST").getCache()
  if (cacheData) {
    categoryListData.value = JSON.parse(cacheData)
  } else {
    const res = await useLoadNoteCategoriesApi()
    categoryListData.value = res.data
    useCache("NATEGORYLIST").setCache(JSON.stringify(res.data))
  }
  handleLoadNote(-1,-1)
}

// 点击分页执行的回调方法
const handleLoadPage = (pageNo) => {
  queryParams.value.pageNo = pageNo
  handleLoadNoteMain()
}

// 点击分页size列表的回调方法
const handleLoadPageSize = (pageSize) => {
  queryParams.value.pageNo = 1
  queryParams.value.pageSize = pageSize
  handleLoadNoteMain()
}

onMounted(()=>{
  handleLoadNoteCategories()
})
</script>
<style></style>